<!-- 地图找房 -->
<template>
	<view>
		<view>
			<u-popup :show="true" :overlay="false" :duration="0" mode="top" zIndex='10076' height='37rpx'>
				<view class="u-flex m-bg-w u-p-t-20 u-p-b-20" :class="show ? 'u-border-bottom' : ''">
					<view class="u-flex u-flex-1 u-flex-center" @click="gettabClick(0)">
						<view class="m-c-9" :class="0===cut || cut0 != 0?'m-c-l-g':''">区域</view>
						<u-icon :name="0===cut?'arrow-up':'arrow-down'" :color="0===cut?'#0D523F':'#999'" size="10">
						</u-icon>
					</view>
					<view class="u-flex u-flex-1 u-flex-center u-border-left" @click="gettabClick(1)">
						<view class="m-c-9" :class="1===cut || cut1 != null?'m-c-l-g':''">按照押金</view>
						<u-icon :name="1===cut?'arrow-up':'arrow-down'" :color="1===cut?'#0D523F':'#999'" size="10">
						</u-icon>
					</view>
					<!-- <view class="u-flex u-flex-1 u-flex-center u-border-left" @click="gettabClick(2)">
						<view class="m-c-9" :class="2===cut || cut2 != null?'m-c-l-g':''">户型</view>
						<u-icon :name="2===cut?'arrow-up':'arrow-down'" :color="2===cut?'#0D523F':'#999'" size="10">
						</u-icon>
					</view> -->
					<!-- <view class="u-flex u-flex-1 u-flex-center u-border-left" @click="gettabClick(3)">
						<view class="m-c-9" :class="3===cut || cut3 != null ?'m-c-l-g':''">面积</view>
						<u-icon :name="3===cut?'arrow-up':'arrow-down'" :color="3===cut?'#0D523F':'#999'" size="10">
						</u-icon>
					</view> -->
				</view>
			</u-popup>
			<view class="m-popup boxrea">
				<u-popup :show="show" :overlay="true" :duration="0" mode="top" height="200rpx"
					:customStyle="{top: popupTop+'px',borderBottomLeftRadius: '10rpx',borderBottomRightRadius: '10rpx'}"
					@close="close" :closeOnClickOverlay='true'>
					<view v-if="cut===0" class="boxgu">
						<view class="u-flex u-flex-between u-flex-1 m-mg-lr">
							<view class="w_33">
								<view class="u-m-t-30" v-for="(item,index) in cityall" :class="cut0===index?'itemon':''"
									:key='index' @click="getxuancity(index,item,'1')">{{item.name}}</view>
							</view>
							<view class="w_33">
								<view class="u-m-t-30" v-for="(item,index) in cityallchild"
									:class="cityind===index?'itemon':''" :key='index'
									@click="getxuancity(index,item,'2')">{{item.name}}</view>
							</view>
							<view class="w_33">
								<view class="u-m-t-30" v-for="(item,index) in cityallchildchild"
									:class="citychid===index?'itemon':''" :key='index'
									@click="getxuancity(index,item,'3')">{{item.name}}</view>
							</view>
						</view>
					</view>
					<view v-else class="boxgu">
						<view class="cut1-item c62">{{params.title}}</view>
						<view class="u-flex u-flex-wrap u-m-t-30">
							<view class="cut2-item" v-if="cut === 1" :class="cut1===index?'item-on':''"
								v-for="(item, index) in params.list" :key="index" @click="getin(index,item,cut)">
								<text>{{item.label}}</text>
							</view>
							<view class="cut2-item" v-if="cut === 2" :class="cut2===index?'item-on':''"
								v-for="(item, index) in params.list" :key="index" @click="getin(index,item,cut)">
								<text>{{item.label}}</text>
							</view>
							<view class="cut2-item" v-if="cut === 3" :class="cut3===index?'item-on':''"
								v-for="(item, index) in params.list" :key="index" @click="getin(index,item,cut)">
								<text>{{item.label}}</text>
							</view>
						</view>
					</view>
					<view style="height: 70rpx;"></view>
					<view class="u-flex u-abso boxbottom">
						<view class="u-flex-1" @click="Reset">
							<view class="button-one">重置</view>
						</view>
						<view class="u-flex-1" @click="requestStatus?determine():''">
							<view class="button-two">确定</view>
						</view>
					</view>
				</u-popup>
			</view>
		</view>
		<map id="map" style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude" :markers="covers"
			@markertap="!show?tap($event):''" :scale="scale" :show-location="true"></map>
		<u-loading-page loading-text="内当家APP" :loading="pageLoad"></u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ids: null,
				cut: null,
				scale: 16,
				latitude: null,
				longitude: null,
				covers: [],
				tabList: [{
						label: '区域',
						status: false
					},
					{
						label: '总价',
						status: false
					},
					{
						label: '户型',
						status: false
					},
					{
						label: '面积',
						status: false
					}
				],
				show: false,
				popupTop: 0,
				params: {},
				cut0: 0,
				cut1: null,
				cut2: null,
				cut3: null,
				cutname0: null,
				cutname1: null,
				cutname2: null,
				cutname3: null,
				num: null,
				type: '',
				map: null,
				listdata: {},
				getcity: [],
				city: '',
				typenum: null,
				pi1: '',
				pit1: '',
				cityind: 0,
				citychid: 0,
				cityindname: '', //城市
				citychildname: '', // 区域
				cityallchild: [{
					name: '不限'
				}],
				cityallchildchild: [{
					name: '不限'
				}],
				cityall: []
			};
		},
		onReady() {
			this.sumHeight('.m-popup');
			this.map = uni.createMapContext('map', this);
		},
		onLoad(e) {
			if (e.type) {
				this.typenum = e.type;
			}
			let cityall = uni.getStorageSync('cityall');
			if (cityall) {
				this.cityall = JSON.parse(cityall);
			}
			this.$nextTick(async function() {
				await this.getchu();
				let yang = 'getMaphouse';
				let markers = await this.require(yang, {
					p: 1,
					pnum: 99
				})
				if (markers) {
					if (markers.length) {
						let covers = [];
						markers.map((item, index) => {
							covers.push({
								id: item.id,
								latitude: +item.lat,
								longitude: +item.lon,
								width: 35,
								height: 49,
								iconPath: 'https://neidangjia.oss-cn-beijing.aliyuncs.com/room/marker.png',
								callout: {
									fontSize: 16,
									bgColor: '#4B8AFE',
									borderRadius: 40,
									textAlign: 'center',
									content: item.properties_name,
									color: '#fff',
									padding: 7,
									display: 'ALWAYS'
								}
							})
						})
						if (covers.length) {
							this.map.addMarkers({
								markers: covers,
								clear: true
							})
							this.scale = 10;
						}
					}
				}
				if (this.pageLoad) {
					setTimeout(() => {
						this.pageLoad = false;
					}, 1000);
				}
			})
		},
		methods: {
			getxuancity(ind, item, key) {
				switch (+key) {
					case 1:
						this.cityind = 0;
						this.citychid = 0;
						this.cut0 = ind;
						this.cityallchild = item.child;
						this.cityallchildchild = this.cityallchild[0].child;
						this.citychildname = item.child[0].child[0].name;
						this.cityindname = item.name;
						break;
					case 2:
						this.citychid = 0;
						this.cityind = ind;
						this.cityallchildchild = item.child;
						this.cityindname = item.name;
						break;
					case 3:
						this.citychid = ind;
						this.citychildname = item.name;
						break;
					default:
						break;
				}
			},
			// 获取当前位置
			getchu() {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						that.latitude = res.latitude;
						that.longitude = res.longitude;
					}
				});
			},
			getin(index, item, cut) {
				this['cut' + this.cut] = index;
				if (this.cut != 0) {
					this['cutname' + cut] = item.label;
				}
				if (cut === 2) {
					let indexk = this.cut2;
					this.pi1 = indexk === 0 ? 1 : (indexk === 1 || indexk === 2 ? 2 :
						(indexk === 3 ? 3 : (indexk === 4 || indexk === 5 ? 4 : (indexk === 6 || indexk === 7 ? 5 :
							6))))
					this.pit1 = indexk === 0 || indexk === 1 ? 1 : (indexk === 5 ? 3 : (indexk === 7 ? 4 : 2))
				}
			},
			async mapRomm() {
				let params = {
					city: this.cityindname || '',
					areaname: this.citychildname || '',
					p: 1,
					pnum: 99,
				};
				if (this.cut1 != null) {
					if (this.cut1 == 0) {
						params.price = '1000以下';
					} else if (this.cut1 == 5) {
						params.pricemax = '5000以上';
					} else if (0 < this.cut1 < 5) {
						params.price = this.cutname1.split('-')[0];
						params.pricemax = this.cutname1.split('-')[1].split('元')[0];
					}
				}
				let yang = 'getMaphouse'
				let markers = await this.require(yang, params)
				if (markers) {
					if (markers.length > 0) {
						let covers = [];
						markers.map((item, index) => {
							covers.push({
								id: item.id,
								latitude: +item.lat,
								longitude: +item.lon,
								width: 35,
								height: 49,
								iconPath: 'https://neidangjia.oss-cn-beijing.aliyuncs.com/room/marker.png',
								callout: {
									fontSize: 16,
									bgColor: '#4B8AFE',
									borderRadius: 40,
									textAlign: 'center',
									content: item.properties_name,
									color: '#fff',
									padding: 7,
									display: 'ALWAYS'
								}
							})
						})
						if (covers.length) {
							this.map.addMarkers({
								markers: covers,
								clear: true
							})
							this.scale = 10;
							this.map.moveToLocation({
								longitude: +covers[0].longitude,
								latitude: +covers[0].latitude
							})
						}
					} else {
						let covers = [];
						this.map.addMarkers({
							markers: covers,
							clear: true
						})
					}
				}
			},
			// markes
			tap(e) {
				// if (this.typenum === 12) {
				// this.nextNav('/pages/handhousing/purchasedetails?id=' + e.detail.markerId);
				// } else {
				this.nextNav('/pages/zufang/xiangqing?id=' + e.detail.markerId);
				// }
			},
			// 重置
			Reset() {
				this.cut0 = 0;
				this.cut1 = null;
				this.cut2 = null;
				this.cut3 = null;
			},
			determine() {
				this.requestStatus = false;
				this.show = false;
				this.mapRomm();
				this.requestStatus = true;
			},
			close() {
				this.show = false;
			},
			gettabClick(index) {
				this.cut = index;
				this.show = false;
				this.show = true;
				this.params = {};
				switch (index) {
					case 0:
						this.params.list = [{
							id: 1,
							label: '不限'
						}, {
							id: 2,
							label: '金湾区'
						}, {
							id: 3,
							label: '昌平2'
						}, , {
							id: 4,
							label: '昌平3'
						}]
						break;
					case 1:
						this.params = {
							title: '价格区间（元）：',
							list: [{
								id: 1,
								label: '1000元'
							}, {
								id: 2,
								label: '1000-1500元'
							}, {
								id: 3,
								label: '1500-2000元'
							}, {
								id: 4,
								label: '2000-3000元'
							}, {
								id: 5,
								label: '3000-5000元'
							}, {
								id: 6,
								label: '5000元'
							}]
						}
						break;
					case 2:
						this.params = {
							title: '房型选择',
							list: [{
								id: 1,
								label: '一室一厅'
							}, {
								id: 2,
								label: '两室一厅'
							}, {
								id: 3,
								label: '两室一厅'
							}, {
								id: 4,
								label: '三室两厅'
							}, {
								id: 5,
								label: '四房两厅'
							}, {
								id: 6,
								label: '六房两厅'
							}, {
								id: 7,
								label: '五房四厅'
							}, {
								id: 8,
								label: '五房两厅'
							}, {
								id: 9,
								label: '四房三厅'
							}]
						}
						break;
					case 3:
						this.params = {
							title: '建筑面积',
							list: [{
								id: 1,
								label: '50m²'
							}, {
								id: 2,
								label: '50m²-70m²'
							}, {
								id: 3,
								label: '70m²-90m²'
							}, {
								id: 4,
								label: '90m²-110m²'
							}, {
								id: 5,
								label: '90m²-130m²'
							}, {
								id: 6,
								label: '130m²-150m²'
							}, {
								id: 7,
								label: '150m²-200m²'
							}, {
								id: 8,
								label: '200m²以上'
							}]
						}
						break;
					default:
						break;
				}
			},
			// 计算高度
			sumHeight(element) {
				let _this = this;
				let win_height = 0;
				const query = uni.createSelectorQuery();
				query.select(element).boundingClientRect();
				query.selectViewport().scrollOffset();
				query.exec(function(res) {
					if (res[0]) {
						_this.popupTop = res[0].top + 37;
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.m-c-l-g {
		color: #0D523F;
	}

	.w_33 {
		width: 32%;
		height: 450rpx;
		overflow-y: auto;
	}

	.c62 {
		color: #636262;
	}

	.boxbottom {
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
	}

	.boxgu {
		height: 450rpx;
		overflow-y: auto;
		background-color: #f2f2f2;
	}

	.u-safe-bottom {
		display: none;
	}

	.cut1-item {
		height: 60rpx;
		line-height: 60rpx;
		background-color: #fff;
	}

	.cut3-item {
		height: 60rpx;
		line-height: 60rpx;
		color: #606060;
	}

	.cut2-item {
		display: inline-block;
		padding: 0 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-left: 25rpx;
		margin-bottom: 20rpx;
		color: #606060;
	}

	.item-on {
		background-color: #0e5642 !important;
		color: #FFFFFF;
	}

	.itemon {
		color: #0e5642;
		font-size: 28rpx;
	}

	.Reset {
		width: 50%;
		height: 60rpx;
		background-color: "#0e5642";
	}

	.button-two {
		color: white;
		text-align: center;
		background-color: #0e5642;
		line-height: 60rpx;
		height: 60rpx;
		// border-bottom-right-radius: 10rpx;
	}

	.button-one {
		color: #646262;
		text-align: center;
		line-height: 60rpx;
		height: 60rpx;
		// border-bottom-left-radius: 10rpx;
	}

	.boxrea {
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}
</style>
